$gutter: 30px;
$border-width: 4px;
$dot-diameter: 8px;
.timeline, .timelineEvent, .timelineBirth, .timelineDie {
  width:100%;
  max-width:800px;
  background:#fff;
  // padding: 100px 50px;
  position: relative;
  margin-top: 20px;
  &:before {
    content: '';
    position: absolute;
    top: 0px;
    left:calc(15% + 16px);
    bottom: 0px;
    width: $border-width;
    background: #ddd;
  }
  &:after {
    content: "";
    display: table;
    clear: both;
  } 
}
.bottom {
  font-size: 16px;
}
.noData {
  margin: 20px 0;
  text-align: center;
  font-size: 16px;
}
.entry {
  clear: both;
  text-align: left;
  position: relative;
  .title {
    float: left;
    width: 15%;
    padding-right: 16px;
    text-align: right;
    position: relative;
    &:before {
      content: '';
      position: absolute;
      width: $dot-diameter;
      height: $dot-diameter;
      border: $border-width solid salmon;
      background-color:#fff;
      border-radius:100%;
      top: 25%;
      right: -$dot-diameter;
      z-index: 0;
    } 
    h3 {
      margin: 0;
      font-size: 16px;
      font-style: italic;
      // font-weight: bold;
    }
    p {
      margin: 0;
      font-size: 100%;
    }
  }
  .body {
    float: right;
    width: 76%;
    .content {
      margin-bottom: 20px;
      margin-right: 10px;
      p {
        flex: 5;
        margin-right: 10px;
        font-size: 16px;
        text-align: justify;
      }
      img {
        flex: 2;
        height: 50px;
      }
    }
    ul {
      color:#aaa;
      padding-left: 0;
      list-style-type: none;

      li {
        margin-bottom: 10px;
        font-size: 16px;
      }
    }
  }
}